<template>
	<view>
		<view class="example">
			<!-- 基础表单校验 -->
			<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">
				<uni-forms-item label="商户名称" label-width="80px" required name="shopName">
					<uni-easyinput v-model="valiFormData.shopName" placeholder="请输入商户名称"
						@blur="validateTitle('shopName')" />
				</uni-forms-item>
				<uni-forms-item label="商户地址" label-width="80px" required name="address">
					<uni-easyinput v-model="valiFormData.address" placeholder="请输入商户地址"
						@blur="validateTitle('address')" />
				</uni-forms-item>
				<uni-forms-item label="联系电话" label-width="80px" required name="phone">
					<uni-easyinput v-model="valiFormData.phone" placeholder="请输入联系电话" @blur="validateTitle('phone')" />
				</uni-forms-item>
				<uni-forms-item label="联系人" label-width="80px" required name="userName">
					<uni-easyinput v-model="valiFormData.userName" placeholder="请输入联系人"
						@blur="validateTitle('userName')" />
				</uni-forms-item>
			</uni-forms>
			<button type="primary" size="mini" style="margin-left: 150rpx;" @click="handleSubmit">提交</button>
			<button size="mini" style="margin-left: 150rpx;">取消</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		http
	} from '/until/request.js'; // 引入你的HTTP请求工具
	import {
		useTokenStore
	} from '../../../store/token';

	console.log("pinia中的用户对象")
	console.log(useTokenStore().token.uid)
	const isValid = ref(true)
	// 表单引用
	const valiForm = ref(null);
	// 表单数据
	const valiFormData = ref({
		userId:useTokenStore().token.uid,
		shopName: '',
		address: '',
		phone: '',
		userName: ''
	});
	const validationErrors = ref()
	// 校验规则

	const validateTitle = (rex) => {
		const vv = valiFormData.value[rex];
		console.log(vv)
		const shuzi = /^1[3456789]\d{9}$/;
		if (vv !== undefined && vv !== null && vv !== '') {
			switch (rex) {
				case 'shopName':
					isValid.value = vv.trim() !== '';
					break;
				case 'address':
					isValid.value = vv.trim() !== '';
					break;
				case 'userName':
					isValid.value = vv.trim() !== '';
					break;
				case 'phone':
					isValid.value = shuzi.test(vv);
					break;
				default:
					isValid.value = true;
			}
		} else {
			isValid.value = false;
		}
		if (!isValid.value) {
			const chineseLabels = {
				shopName: '商户名称',
				address: '商户地址',
				phone: '联系电话',
				userName: '联系人'
			};
			const label = chineseLabels[rex] || rex;
			if (rex === 'phone') {
				validationErrors[rex] = `${label} 必须为有效的手机号`;

			} else {
				validationErrors[rex] = `${label} 不能为空`;

			}
			uni.showToast({
				title: validationErrors[rex],
				icon: 'none',
				duration: 2000
			});
		} else {
			delete validationErrors[rex];
		}
	}
	// 提交数据到服务器
	const handleSubmit = async () => {
		// 校验所有字段
		Object.keys(valiFormData.value).forEach(field => validateTitle(field));
		console.log(Object.keys(validationErrors).length)
		// 如果没有错误，则提交表单
		if (Object.keys(validationErrors).length == 5) {
			const res = await http({
				url: '/audit/audit', // 替换为实际的API路径
				method: 'POST', // 如果是新增记录，通常使用 POST 方法
				data: valiFormData.value // 直接传递 valiFormData 对象
			});
			if (res.code==200) {
				uni.showToast({
					title: '审核已添加',
					icon: 'success',
					duration: 2000
				})
				// 设置定时器，在提示框显示结束后进行页面跳转
				setTimeout(function() {
				    uni.reLaunch({
				    	url: '/pages/businessman/fenlei/fenlei'
				    })
				}, 2000);
				
			} else {
				uni.showToast({
					title: '审核添加错误',
					icon: 'error',
					duration: 2000
				})
			}
		}

	};
</script>

<style scoped>
	.example {
		padding: 20rpx;
	}

	button[type="primary"] {
		margin-left: 150rpx;
	}
</style>